<template>
  <div class="dy-main WealthIndex">
    <div class="dy-header">
      <x-header title="财富" :left-options="{preventGoBack:true}" @on-click-back="back"></x-header>
    </div>
    <div class="dy-body">
      <div class="total">
        <div class="not-login" v-if="!loginStatus">
          <button>登录查看</button>
          <p>请登录查看您的财富详情</p>
        </div>
        <div class="login" v-if="loginStatus">
          <div class="hd">详情 ></div>
          <div class="md">
            <div class="item">
              <strong>83.333.00</strong>
              <span>总资产(元)</span>
            </div>
            <div class="item">
              <strong>1.234.56</strong>
              <span>历史收益</span>
            </div>
          </div>
          <div class="bd">
            <p>数据更新于2018年6月22日</p>
          </div>
        </div>
      </div>
      <grid>
        <grid-item :label="item" v-for="(item, index) in iconArray" :key="index" style="width: 25%" @click.native="gotoitem(item)">
          <img slot="icon" src="../../../static/icon/question.svg">
        </grid-item>
      </grid>
      <div class="prd-list">
        <div class="item">
          <div class="data-head">
            <h3>活期+</h3>
            <span>更多</span>
          </div>
          <div class="data-box" v-for="(tagLists, index) in prdInfo" :key="index" @click="gotoDetail(index)">
            <div class="left-info">
              <div class="rate">{{ tagLists.rate }}</div>
              <div class="rate-msg">{{ tagLists.rateMsg }}</div>
            </div>
            <div class="center-info">
              <div class="prd-name">{{ tagLists.prdName }}</div>
              <div class="tag" v-for="(tag, index) in  tagLists.tagList" :key="index">{{ tag }}</div>
              <div class="tag red" v-if="parseInt(tagLists.soldVol)/parseInt(tagLists.totalVol) >= 0.9">额度紧张</div>
            </div>
            <div class="right-icon">
              <img class="icon-img" src="../../assets/img/Financial/zunxiang.png" v-if="tagLists.icon === '1'">
            </div>
          </div>
        </div>
        <div class="item">
          <div class="data-head">
            <h3>定期+</h3>
            <span>更多</span>
          </div>
          <div class="data-box" v-for="(tagLists, index) in prdInfo" :key="index" @click="gotoDetail(index)">
            <div class="left-info">
              <div class="rate">{{ tagLists.rate }}</div>
              <div class="rate-msg">{{ tagLists.rateMsg }}</div>
            </div>
            <div class="center-info">
              <div class="prd-name">{{ tagLists.prdName }}</div>
              <div class="tag" v-for="(tag, index) in  tagLists.tagList" :key="index">{{ tag }}</div>
              <div class="tag red" v-if="parseInt(tagLists.soldVol)/parseInt(tagLists.totalVol) >= 0.9">额度紧张</div>
            </div>
            <div class="right-icon">
              <img class="icon-img" src="../../assets/img/Financial/zunxiang.png" v-if="tagLists.icon === '1'">
            </div>
          </div>
        </div>
        <div class="item">
          <div class="data-head">
            <h3>结构化</h3>
            <span>更多</span>
          </div>
          <div class="data-box" v-for="(tagLists, index) in prdInfo" :key="index" @click="gotoDetail(index)">
            <div class="left-info">
              <div class="rate">{{ tagLists.rate }}</div>
              <div class="rate-msg">{{ tagLists.rateMsg }}</div>
            </div>
            <div class="center-info">
              <div class="prd-name">{{ tagLists.prdName }}</div>
              <div class="tag" v-for="(tag, index) in  tagLists.tagList" :key="index">{{ tag }}</div>
              <div class="tag red" v-if="parseInt(tagLists.soldVol)/parseInt(tagLists.totalVol) >= 0.9">额度紧张</div>
            </div>
            <div class="right-icon">
              <img class="icon-img" src="../../assets/img/Financial/zunxiang.png" v-if="tagLists.icon === '1'">
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--<div class="dy-footer"></div>-->
  </div>
</template>
<script>
export default {
  data () {
    return {
      loginStatus: true,
      iconArray: ['活期+', '定期+', '结构化', '基金', '资产管理', '保险', '预留', '预留'],
      prdInfo: [{
        rate: '4.01%',
        rateMsg: '七日年化',
        prdName: 'IXA汇添赢',
        tagList: ['T+1到账', '5元起购'],
        totalVol: '100000',
        soldVol: '91000',
        icon: '0'
      }, {
        rate: '4.01%',
        rateMsg: '七日年化',
        prdName: 'IXA汇添赢',
        tagList: ['T+1到账', '5元起购'],
        totalVol: '100000',
        soldVol: '1000',
        icon: '1'
      }]
    }
  },
  methods: {
    back () {
      this.$publicFun.goBack(this)
    },
    gotoitem (item) {
      console.log(item)
      if (item === '活期+') {
        this.$router.push({name: 'CurrentPlusMain'})
      }
    }
  },
  created () {
    this.status = this.$route.query.status
  }
}
</script>
<style lang="less">
  .WealthIndex {
    .dy-body {
      position: relative;
      overflow: auto;
      .total {
        width: 100%;
        height: 3.12rem;
        background: url('../../../static/img/main-top-bg.png') no-repeat;
        background-size: 100%;
        text-align: center;
        .not-login {
          button {
            margin-top: .8rem;
            width: 2.4rem;
            height: .8rem;
            border: .02rem solid #fff;
            font-size: .32rem;
            color: #fff;
            border-radius: .2rem;
          }
          p {
            margin-top: .4rem;
            line-height: .36rem;
            color: #fff;
          }
        }
        .login {
          padding: .25rem .14rem .3rem;
          .hd {
            padding: .1rem .14rem .35rem;
            text-align: right;
            color: #fff;
          }
          .md {
            display: flex;
            .item {
              flex: 1;
              padding: 0 .16rem;
              border-right: 1px solid #fff;
              color: #fff;
              strong {
                display: block;
                font-weight: normal;
                font-size: .48rem;
              }
              span {
                display: block;
                margin-top: .05rem;
              }
            }
            :last-child {
              border-right: 0 none;
            }
          }
          .bd {
            margin-top: .3rem;
            font-size: .24rem;
            color: #fff;
          }
        }
      }
      .weui-grid {
        padding: 10px;
        background-color: #fff;
        .weui-grid__icon {
          width: .38rem;
          height: .38rem;
        }
        p {
          font-size: .26rem;
        }
      }
      .prd-list{
        padding-bottom: .3rem;
        .data-head {
          display: flex;
          justify-content: space-between;
          padding: .35rem .3rem .2rem;
        }
        .data-box{
          display: flex;
          margin-bottom: 1px;
          height: 1.5rem;
          background: #fff;
          .left-info{
            padding: 0.3rem 0.3rem 0;
            .rate{
              padding-bottom: 0.1rem;
              font-weight: bolder;
              font-size: 0.4rem;
              color: #F23E00;
            }
            .rate-msg{
              font-size: 0.26rem;
              color: #999999;
            }
          }
          .center-info{
            display: flex;
            padding-left: 0.2rem;
            width: 60%;
            flex-wrap: wrap;
            .prd-name{
              padding-top: 0.2rem;
              width: 100%;
            }
            .tag{
              padding: 0 0.1rem;
              margin-right: 0.1rem;
              border: 1px solid #999999;
              border-radius: 0.06rem;
              font-size: 0.24rem;
              height: 0.4rem;
              line-height: 0.4rem;
            }
            .red{
              color: #F23E00;
            }
          }
          .right-icon{
            .icon-img{
              height: 1rem;
              width: 1rem;
            }
          }
        }
      }
    }
  }
</style>
